details summary::-webkit-details-marker { display: none; }
summary::before {
  font-family: "Inter", sans-serif;
  content: "▶";
  position: absolute;
  top: 5px;
  left: 0.8rem;
  transform: rotate(0);
  transform-origin: center;
  transition: 0.3s transform ease;  
}
details[open] > summary:before {
  transform: rotate(90deg);
  transition: 0.3s transform ease;
  }


summary {
  border-radius: 5px;
  width: 280px;
  outline: none;
  padding: 5px 0px 15px 30px;
  display: block;
  background: rgb(255, 255, 255);
  color: rgb(96, 194, 236);
  position: relative;
  cursor: pointer;
  font-size: 15px;
  }



  details .summary-i::-webkit-details-marker { display: none; }
  .summary-i::before {
   
    content: ">";
    position: absolute;
    top: 8px;
    left: 160px;
    transform: rotate(0);
    transform-origin: center;
    transition: 0.3s transform ease;
  }

  details[open] > .summary-i:before {
    transform: rotate(90deg);
    transition: 0.3s transform ease;
    }

  .summary-i {
    border-radius: 5px;
    width: 500px;
    outline: none;
    padding: 8px 0px 5px 0px;
    display: block;
    color:  #616161;
    position: relative;
    cursor: pointer;
    font-size: 15px;
    }



details[open] summary,
summary:hover {
 
  color:rgb(144, 144, 144);
  background: rgb(255, 255, 255);

  
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
  color:rgb(144, 144, 144);
    }



    #brand_dat {
      color: #ca4040;
      max-height: 200px;  /* Устанавливаем максимальную границу высоты */
      overflow-y: auto; /* Включаем вертикальную прокрутку в случае выхода за границы */
      font-size: 18px; /* Указываем размер шрифта */
      }
    
      datalist  {
      color: #ca4040;
      max-height: 200px;  /* Устанавливаем максимальную границу высоты */
      overflow-y: auto; /* Включаем вертикальную прокрутку в случае выхода за границы */
      font-size: 18px; /* Указываем размер шрифта */
      }